<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day4 demo </title>
<style type="text/css">

	.ball{
		width: 15px;height: 15px;
		background-color: red;
		border-radius: 50%;
	}


</style>
</head>
<body>

<ol>
	<h3>讲解：钩子函数的动画切换为什么要在后半场动画给flag取非</h3>
	<li>因为在flag刚开始时值为true可见，当我们点击按钮之后flag变为false不可见</li>
	<li>所以在进行动画前半场，动画进行时，小球的flag值为true可见，</li>
	<li>如果后半场函数没有取非的话，当再次点击按钮时（第二次点击时），小球的flag值就变为false不可见</li>
	<li>所以后半场动画给flag取非可以有利于下一次钩子函数的晚餐展示</li>
</ol>


<div id="app">

	<input type="button" value="加入购物车" @click='flag=!flag'>
  
  <transition 
  		@before-enter='beforeEnter'
  		@enter='enter'
  		@after-enter='afterEnter'>
	<div class="ball" v-show="flag"></div>
  </transition>

</div>









<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
  	flag:false,
  	 
  },

  methods:{
  	beforeEnter(el){
  		el.style.transform = 'translate(0,0)'
  	},

  	enter(el,done){
  		el.offsetWidth//没有其他含义，就是启动动画的作用
  		el.style.transform = 'translate(150px,250px)'
  		el.style.transition = 'all .5s ease'
  		done()//相当于分秒不差的适时启用afterEnter方法
  	},

  	afterEnter(el){
  		this.flag = false
  }

}//methods结束




})





</script>

	
</body>
</html>